<template>
  <div class="ssc-table">
    <div class="ssc-table-header">
      <span class="ssc-table-header-title">交易管理</span>
    </div>

    <a-tabs v-model:activeKey="activeKey" @change="getContentList()">
      <a-tab-pane :key="-1" tab="全部" />
      <a-tab-pane v-for="(label, status) in ORDER_STATUS" :key="status" :tab="label" />
    </a-tabs>

    <!-- 内容 -->
    <OrderCard :list="list" :columns="columns" :loading="loading" :pagination="pagination" @change="handleTableChange">
      <template #extra="{ record }">
        <span class="settlement-amount">
          应结算: <span class="amount">{{ record.orderTotal }}</span>
        </span>
      </template>
      <template #bodyCell="{ column, record }">
        <div class="seller-info" v-if="column.dataIndex === 'sellerName'">
          <a-avatar :src="record.sellerAvatar" />
          <div class="seller-detail">
            <span class="name">{{ record.sellerName }}</span>
            <!-- 后端暂时拿不到，暂时不展示 -->
            <!-- <span class="phone">{{ record.phone }}</span> -->
          </div>
        </div>
        <div class="action-btns" v-if="column.dataIndex === 'action'">
          <a @click="checkOrder(record)">订单详情</a>
          <a-divider type="vertical" />
          <a class="contact-btn" @click="contactSeller(record)">联系买家</a>
        </div>
      </template>
    </OrderCard>
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'

  import { requestTradeList } from '/@/api/exchange/trade'
  import router from '/@/router'

  import OrderCard from './OrderCard.vue'
  // 订单状态映射
  const ORDER_STATUS = {
    1: '已下单（待支付）',
    2: '已支付（待确认）',
    3: '已完成',
  } as const

  const columns = [
    {
      width: 500,
      title: '产品信息',
      dataIndex: 'productName',
    },
    {
      title: '价格',
      width: 100,
      dataIndex: 'priceAmount',
    },
    {
      title: '卖家',
      dataIndex: 'sellerName',
    },
    {
      title: '订单状态',
      dataIndex: 'orderStatus',
      customRender: ({ text }: { text: number }) => {
        return ORDER_STATUS[text] || '未知状态'
      },
    },
    {
      title: '操作',
      dataIndex: 'action',
    },
  ]
  const loading = ref(false)
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 3,
  })

  const page = computed(() => ({
    pageIndex: pagination.value.current,
    pageSize: pagination.value.pageSize,
  }))
  const searchParams = ref<TradeTypes.SearchData>()

  const list = ref<TradeTypes.IResponse[]>([])
  // 选中
  const activeKey = ref<number>(-1)

  // 分页查询
  const handleTableChange = (tabPage: { current: number; pageSize: number }) => {
    pagination.value.current = tabPage.current
    getContentList()
  }

  // 获取页面list
  const getContentList = async () => {
    loading.value = true
    const { responseData } = await requestTradeList({
      ...page.value,
      ...searchParams.value,
      orderStatus: activeKey.value === -1 ? undefined : activeKey.value,
    })
    list.value = responseData.list || []
    pagination.value.total = +responseData.total || 0
    loading.value = false
  }

  // 查询
  const search = (params: TradeTypes.SearchData) => {
    searchParams.value = params
    pagination.value.current = 1
    getContentList()
  }

  /* 查看订单 */
  const checkOrder = (info: TradeTypes.IResponse) => {
    router.push({
      path: `/trade/order-details/${info.orderNo}`,
    })
  }

  /* 联系卖家 */
  const contactSeller = (info: TradeTypes.IResponse) => {
    console.log(info)
    router.push({
      path: `/chat/index`,
    })
  }

  defineExpose({
    search,
  })
</script>
<style lang="less" scoped>
  .seller-info {
    display: flex;
    align-items: center;

    .seller-detail {
      margin-left: 10px;
      display: flex;
      flex-direction: column;
    }
  }
</style>
